import React, { useState, useEffect, useRef } from 'react'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import style from "./index.module.scss"
import { Card, Popover, Badge, Space, Button, message } from 'antd';
import * as each from "echarts"
import { Link, NavLink } from "react-router-dom"
import { knowledgeList, Works, comment } from "../../untils/api"

const { Meta } = Card;
export default function Work() {
    const [pageSizes, setPageSize] = useState(10)
    const [page, setPage] = useState(1)
    const [total, settotal] = useState(0)
    const [data, setData] = useState([])
    const [fromobj, setFeomObj] = useState<object>({})
    const [newData, setNewdata] = useState([])
    useEffect(() => {
        getList(page)
        //获取最新文章数据
        getNewComment()
    }, [])
    //最新数据
    const getNewComment=()=>{
        const params = {
            page: 1,
            pageSize: 6
        }
        comment.getComment(params).then(res => {
            console.log(res.data.data[0])
            setNewdata(res.data.data[0])
        })
        console.log(newData)
    }
    //列表数据
    const getList = (page: number, pageSize: number = pageSizes, Fromobj: object = fromobj) => {
        const params = {
            page,
            pageSize: pageSize,
            ...Fromobj
        }
        console.log(params)
        Works.getWorksList(params).then(res => {
            console.log(res.data.data[0])
            //列表
            setData(res.data.data[0])
            //总数据
            settotal(res.data.data[1])
        })
    }
    let [myeach, setEach] = useState<any>()
    // const myeach = useRef<any>()
    let myEcharse = useRef<any>();
    let Eachinit = () => {

        // window.addEventListener("resize", () => {
        //   instance.resize()
        // })
        // const option = {
        //   tooltip: {   //鼠标划过显示
        //     trigger: 'axis',  //触发
        //     axisPointer: {
        //       type: 'cross',   //默认为line，line直线，cross十字准星
        //       crossStyle: {   //cross颜色
        //         color: '#999'
        //       }
        //     }
        //   },
        //   title:{ //标题
        //     text:"每周用户访问量"
        //   },
        //   // toolbox: {  //右上角部分
        //   //   feature: {
        //   //     dataView: { show: true, readOnly: false },
        //   //     magicType: { show: true, type: ['line', 'bar'] },
        //   //     restore: { show: true },
        //   //     saveAsImage: { show: true }
        //   //   }
        //   // },
        //   legend: { //顶部标题
        //     data: ["访问量","评论数"]
        //   },
        //   xAxis: [  //x轴
        //     {
        //       type: 'category',
        //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //       axisPointer: {
        //         type: 'shadow'
        //       }
        //     }
        //   ],
        //   yAxis: [  //y轴
        //     {
        //       type: 'value',
        //       name: '阅读量',
        //       min: 0,
        //       max: 250,
        //       interval: 50,
        //     },
        //     {
        //       type:"value",
        //       name: '评论量',
        //       min: 0,
        //       max: 25,
        //       interval: 5,
        //     }

        //   ],
        //   color:["darkrend","darkgreen"],
        //   series: [
        //     {
        //       name: '阅读量',
        //       type: 'bar',
        //       tooltip: {
        //         valueFormatter: function (value: number) {
        //           return value + ' ml';
        //         }
        //       },
        //       data: [
        //         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        //       ]
        //     },
        //     {
        //       name: '评论量',
        //       type: 'line',
        //       yAxisIndex:1,
        //       tooltip: {
        //         valueFormatter: function (value: number) {
        //           return value + ' ml';
        //         }
        //       },
        //       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        //     }
        //   ]
        // };
        let option = {
            tooltip: { //鼠标滑过显示
                trigger: 'axis', //触发
                axisPointer: {
                    type: 'cross', //默认为line，line直线、cross十字准星、shadow阴影
                    crossStyle: { //cross颜色
                        color: '#999'
                    }
                }
            },
            title: { //标题
                // left:'center',
                text: '每周用户访问量',
            },
            // toolbox: { //右上角部分
            //     feature: {
            //         dataView: { show: true, readOnly: false }, //数据表--第一个
            //         magicType: { show: true, type: ['line', 'bar'] }, //切换折线图、柱形图  第2.3个
            //         restore: { show: true }, //还原
            //         saveAsImage: { show: true } //下载
            //     }
            // },
            legend: { //顶部标题
                data: ['Evaporation', 'Precipitation', 'Temperature'],
                // data: ['访问量', '评论数'],
            },
            xAxis: [ //x轴
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [ //y轴
                {
                    type: 'value',
                    name: '阅读量',
                    min: 0,
                    max: 250,
                    interval: 50,
                },
                {
                    type: 'value',
                    name: '评论量',
                    min: 0,
                    max: 25,
                    interval: 5,
                }
            ],
            color: ['darkred', 'darkgreen'],
            series: [
                {
                    name: '阅读量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value: number) {
                            return value + ' 条';
                        }
                    },
                    data: [
                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                    ]
                },
                {
                    name: '评论量',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value: number) {
                            return value + ' 条';
                        }
                    },
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        // myeach=each.init(myEcharse.current)
        myeach = each.init(myEcharse.current)
        myeach.setOption(option)

    }

    useEffect(() => {
        console.log(myEcharse.current)
        const resize = (): void => myEcharse.current.resize();
        window.removeEventListener("resize", resize);
        window.addEventListener("resize", resize);
        // console.log(Eachinit())
        Eachinit()
    }, [])
    //评论不通过
    const PassComment = (id: number, pass: boolean) => {
        console.log(id, pass)
        comment.passComment(id, { pass }).then(res => {
            const msg = `评论${pass ? "通过" : "未通过"}`
            message.success(msg)
            // getList(page)
            getNewComment()
        })
       

    }
    //回复评论
    const Recomment = (record: object) => {
        console.log(record)
        // showModal()
        // comment.Recomment(record).then(res=>{
        //     console.log()
        // })
    }
    //删除评论
    const DeleteComment = (id: number) => {
        comment.deleteComment(id).then(res => {
            if (res.data.statusCode === 200) {
                message.success("删除成功")
            }
        })
        getList(page)
        getNewComment()
    }
    const titlNav = () => {
        return (
            <div className={style["title-wrap"]}>
                <span>最新评论</span>
                <NavLink className={style["sizeColor"]} to="/home/comment"> 全部评论</NavLink>
            </div>

        )
    }
    return (
        <div>
            <Card >

            </Card >
            <Card >
                <div ref={myEcharse} style={{ width: "800px", height: " 400px" }}></div>
            </Card >

            <Card title="快速导航" className={style["work-link"]} >
                <div className={style["work-nalink"]}>
                    <NavLink className={style["sizeColor"]} to="/home/page">页面管理</NavLink>
                    <NavLink className={style["sizeColor"]} to="/home/comment">评论管理</NavLink>
                    <NavLink className={style["sizeColor"]} to="/home/allachive">文章管理</NavLink>
                    <NavLink className={style["sizeColor"]} to="/home/knowledge">用户管理</NavLink>
                    <NavLink className={style["sizeColor"]} to="/home/classfiy">分类管理</NavLink>
                    <NavLink className={style["sizeColor"]} to="/home/knowledge">知识小册</NavLink>
                </div>
            </Card >
            <Card title="最新文章" className={style["work-link"]} >
                <div className={`${style["a-table-know"]} box-pd `}>
                    {/* <AForm onsubmit={submit} AformConfig={AformConfig}></AForm> */}
                    {data && data.map((item: any, index) => {
                        return <Card
                            style={{ width: 300 }}
                            cover={
                                <img
                                    alt='文章封面'
                                    className={style["img"]}
                                    src={item.cover}
                                />
                            }
                        >
                            <Meta
                                title={item.title}
                                description={item.summary}
                            />
                        </Card>
                    })}
                </div>
            </Card >

            <Card className={style["work-link"]} title={titlNav()} >
                {
                    newData && newData.map((item: any, index) => {
                        return <li className={style["ant-list-split"]}>
                            <div>
                                <span>{item.name}&nbsp;在&nbsp;
                                    <Popover content={404} >
                                        <a href="">文章</a>&nbsp;
                                    </Popover>评论</span>
                                <Popover content={item.content} >&nbsp;
                                    <a href="">查看内容</a>&nbsp;
                                </Popover>
                                {
                                    item.pass ? <span><Badge status="success" ></Badge>通过</span> : <span><Badge status="warning" ></Badge>未通过</span>
                                }
                            </div>

                            <Space>
                                <Button type='link' onClick={() => PassComment(item.id, true)}>通过</Button>
                                <Button type='link' onClick={() => PassComment(item.id, false)}>拒绝</Button>
                                <Button type='link' onClick={() => { Recomment(item) }}>回复</Button>
                                <Button type='link' onClick={() => { DeleteComment(item.id) }}>删除</Button>
                            </Space>
                        </li>
                    })
                }
            </Card >
        </div >
    )
}

